<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<?php
include_once("u_checkLogin.php");
include_once("u_getLoginInfo.php");
?>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="../public/pic/f.png" type="image/x-icon">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>预约·预约挂号</title>
    <link rel="stylesheet" href="../public/css/bootstrap.min.css">
    <link rel="stylesheet" href="../public/css/user_public.css">
    <script src="../public/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="css/user_goto_order.css">
    <script src="js/u_order_form.js"></script>
</head>

<body>
    <!-- 头部信息开始 -->
    <header>
        <nav class="nav-top">
            <!-- 网站logo -->
            <div class="logo">
                <img src="../public/pic/logo-h-w.png" alt="动物家宠物医院">
            </div>
            <!-- 登录者信息 -->
            <div class="user-info">
                <div class="user-info-con">
                    <span>现在时间：<span id="nowtime"></span></span>
                    <script src="../public/js/getnowtime.js"></script>
                    <br>
                    <span>当前登录：<name><?php echo $userName;?></name></span>
                </div>
                <a href="u_logout.php">点我退出</a>
            </div>
        </nav>
    </header>
    <!-- 头部信息结束 -->

    <!-- 主要内容开始 -->
    <main>
        <!-- 网页导航开始 -->
        <nav>
            <ul class="nav nav-tabs nav-main">
                <li class="nav-item nav-main-item">
                    <a class="nav-link active" aria-current="page" href="user_gotoOrder.php">预约服务</a>
                </li>
                <li class="nav-item nav-main-item">
                    <a class="nav-link" href="user_index.php">主页</a>
                </li>
                <li class="nav-item nav-main-item">
                    <a class="nav-link" href="user_myinfo.php">个人信息</a>
                </li>
            </ul>
        </nav>
        <!-- 网页导航结束 -->
        <!-- 侧边导航栏开始 -->
        <div class="aside-navbar">
            <p>菜 单 栏</p>
            <ul>
                <a href="user_nowOrder.php">
                    <li>当前预约信息</li>
                </a>
                <a href="user_gotoOrder.php">
                    <li class="li-c">预约挂号</li>
                </a>
                <a href="user_orderHistory.php">
                    <li>预约历史记录</li>
                </a>
            </ul>
        </div>
        <!-- 侧边导航栏结束 -->
        <!-- 主要内容开始 -->
        <div class="main-content">
            <p class="main-content-title">预 约 挂 号</p>
            <!-- 挂号信息 -->
            <div class="form-div">
                <p class="form-tips">提示：预约时间为一周以内，预约时间段为8:00-17:00，每位医生每天可接受收5位预约。当天预约请提前一个小时进行。</p>
                <form class="row g-3" action="u_submitOrderInfo.php" method="post">
                    <div class="col-7">
                        <label for="petlist" class="form-label">选择您的宠物</label>
                        <select class="form-select" id="petlist" onchange="GetPetInfo()" required>
                            <option value="none" disabled selected>---请选择---</option>
                            <?php include_once("u_getPetList.php"); ?>
                        </select>
                    </div>
                    <div class="row g-3 petinfo-div" id="petInfo">
                        <div class="col-6">
                            <label for="petID" class="form-label">宠物ID</label>
                            <input type="text" class="form-control" id="petID" name="petID" value="待选择" required
                                disabled>
                        </div>
                        <div class="col-3">
                            <label for="petName" class="form-label">宠物昵称</label>
                            <input type="text" class="form-control" id="petName" name="petName" value="待选择" required
                                disabled>
                        </div>
                        <div class="col-3">
                            <label for="petType" class="form-label">宠物类别</label>
                            <input type="text" class="form-control" id="petType" name="petType" value="待选择" required
                                disabled>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <label for="orderType" class="form-label">预约服务类别</label>
                        <select class="form-select" id="orderType" name="orderType" onchange="GetDocInfo()" required>
                            <option value="none" disabled selected>---预约服务类别---</option>
                            <?php include_once("u_getDepartments.php");?>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="orderDate" class="form-label">预约日期</label>
                        <input type="date" class="form-control" id="orderDate" name="orderDate" onchange="GetDocInfo()" required>
                    </div>
                    <div class="col-md-4">
                        <label for="orderTime" class="form-label">预约时间</label>
                        <input type="time" class="form-control" id="orderTime" name="orderTime" onchange="checkTime()"  required>
                    </div>
                    <div id="docList-div">
                        <label id="orderDocTips" class="form-label">选择 <b>预约服务类别</b>、<b>预约日期</b> 后，可选择预约医生</label>
                        <br>
                        <div class="form-check form-check-inline">
                            <label class="form-check-label">当前不可选择</label>
                        </div>
                    </div>
                    <div class="col-12">
                        <label for="remark" class="form-label">预约备注</label>
                        <textarea id="remark" name="orderRemark" cols="67" rows="5"
                            placeholder="请简述您的宠物遇到的或者产生的问题或症状，以便我们更好地进行服务......"></textarea>
                    </div>
                    <div class="col-md-6">
                        <label for="phone" class="form-label">联系电话</label>
                        <input type="text" class="form-control" id="phone" name="phone" onchange="checkPhone()" name="phone" value="<?php echo $tel ?>"
                            required>
                    </div>
                    <div class="col-12">
                        <button class="btn btn-primary" type="submit" id="submitBtn" onclick="return checkAllForm()">提 交 挂 号</button>
                    </div>
                    <input type="hidden" id="index_orderType" value="">
                    <input type="hidden" id="index_orderDate" value="">
                </form>
            </div>
        </div>
        <!-- 主要内容结束 -->
    </main>
    <!-- 主要内容结束 -->

    <!-- 底部开始 -->
    <footer>
        <p>&copy; 2025 ANIMAL HOME PET HOSPITAL. All rights reserved.</p>
    </footer>
    <!-- 底部结束 -->
</body>

</html>